<template>
  <div class="vanilla">
    <!-- 指数信息 -->
    <div class="newhead">
      <div class="exponent">
        <div class="exponent_first">
          <div class="list">
            <p>标的指数</p>
            <span>3000.00+2.56%</span>
          </div>
          <div class="list">
            <p>香草指数</p>
            <span>3000.00+2.56%</span>
          </div>
          <div class="list">
            <p>雪球指数</p>
            <span>3000.00+2.56%</span>
          </div>
        </div>
        <div class="exponent_list" v-for="(item,index) in zhishuData" :key="index">
          <div class="list" v-for="(itemC,idx) in item" :key="idx">
            <span class="lable">{{ itemC.name }}</span>
            <span class="value" :style="{color:`${itemC.zhangfu>0?'#EB4436' :'#0E9D58' }`}">
              {{itemC.price}}
              <span>{{itemC.zhangfu }}%</span>
            </span>
          </div>
        </div>
      </div>
      <div class="hotPlate">
        <div class="hotPlate-head">
          <span>热门板块</span>
          <span style="cursor: pointer" @click="morePlate">更多</span>
        </div>
        <div class="hotPlate-main">
          <div
            class="list"
            v-for="item in plateList"
            :key="item.name"
            style="background:#EA5454"
            @click="()=>{
            vanillaQueryData.gainian=item.name
          }"
            :style="{background:`${vanillaQueryData.gainian==item.name ?'#e60000':'#EA5454'}`}"
          >
            <div class="name">{{item.name}}</div>
            <div class="index">{{ item.zhangfu }}%</div>
          </div>
          <div
            class="list fall"
            v-for="item in fall"
            :key="item.name"
            @click="()=>{
            vanillaQueryData.gainian=item.name
          }"
            :style="{background:`${vanillaQueryData.gainian==item.name ?'#07b44c':'#0ABF9B'}`}"
          >
            <div class="name">{{item.name}}</div>
            <div class="index">{{ item.zhangfu }}%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="header-left">
        <div class="conceptd">
          <span class="title">总市值</span>
          <el-input class="inp" v-model="vanillaQueryData.marketvalue1" size="mini"></el-input>~
          <el-input class="inp" v-model="vanillaQueryData.marketvalue2" size="mini"></el-input>
          <span>亿元</span>
        </div>
        <div class="conceptd">
          <span class="title">流通市值</span>
          <el-input class="inp" v-model="vanillaQueryData.circulation_cap1" size="mini"></el-input>~
          <el-input class="inp" v-model="vanillaQueryData.circulation_cap2" size="mini"></el-input>
          <span>亿元</span>
        </div>
        <div class="conceptd">
          <span>股价</span>
          <el-input class="inp" v-model="vanillaQueryData.stockprice1"></el-input>~
          <el-input class="inp" v-model="vanillaQueryData.stockprice2"></el-input>
          <span>元</span>
        </div>
        <div class="concept">
          <span>同花顺概念</span>
          <el-select
            v-model="vanillaQueryData.gainian"
            size="mini"
            placeholder="请选择概念板块"
            filterable
            clearable
          >
            <el-option
              v-for="item in conceptualOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="concept">
          <span>上市板块</span>
          <el-select
            v-model="vanillaQueryData.bankuai"
            size="mini"
            placeholder="请选择"
            class="defSelect"
            clearable
          >
            <el-option
              v-for="item in listedSectorOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="concept">
          <span>上市地</span>
          <el-select
            v-model="vanillaQueryData.exchange"
            size="mini"
            placeholder="请选择"
            class="defSelect"
            clearable
          >
            <el-option
              v-for="item in listingLocationOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="concept">
          <span>实控人</span>
          <el-select
            v-model="vanillaQueryData.ownner"
            size="mini"
            placeholder="请选择"
            class="defSelect"
            clearable
          >
            <el-option
              v-for="item in actualControllerOptions"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="header-right">
        <el-button icon="el-icon-refresh-right" class="refresh" @click="reset">重置</el-button>
        <el-button icon="el-icon-search" class="search" @click="stockList">查询</el-button>
      </div>
    </div>
    <div class="searchedit">
      <span class="search">筛选条件</span>
      <span
        v-show="vanillaQueryData.marketvalue1"
        class="all"
      >总市值： {{ vanillaQueryData.marketvalue1 }}亿元 ~ {{ vanillaQueryData.marketvalue2 }}亿元,</span>
      <span
        v-show="vanillaQueryData.circulation_cap1"
        class="all"
      >流通市值 {{ vanillaQueryData.circulation_cap1 }}亿元 ~ {{ vanillaQueryData.circulation_cap2 }}亿元</span>
      <span
        v-show="vanillaQueryData.stockprice1"
        class="all"
      >股价： {{ vanillaQueryData.stockprice1 }}元 ~ {{ vanillaQueryData.stockprice2 }}元,</span>
      <span v-show="vanillaQueryData.gainian" class="all">同花顺概念： {{ vanillaQueryData.gainian }},</span>
      <span v-show="vanillaQueryData.bankuai" class="all">上市板块： {{ bankuai}},</span>
      <span v-show="vanillaQueryData.exchange" class="all">上市地： {{ exchange }} ,</span>
      <span v-show="vanillaQueryData.ownner" class="all">实控人： {{ vanillaQueryData.ownner }}</span>
      <span
        class="all"
        v-show="!vanillaQueryData.marketvalue1&&!vanillaQueryData.stockprice1&&!vanillaQueryData.circulation_cap1&&!vanillaQueryData.gainian&&!bankuai&&!exchange&&!vanillaQueryData.ownner"
      >全部</span>
    </div>
    <div class="newTabled">
      <!-- 表头按钮 -->
      <div class="meter">
        <div class="expand">
          <i class="el-icon-s-unfold" @click="expand" v-show="!expandFlag"></i>
          <i class="el-icon-s-fold" v-show="expandFlag" @click="expand"></i>
          <span v-show="!expandFlag" @click="expand">展 开</span>
          <span v-show="expandFlag" @click="expand">关 闭</span>
          <div class="animationName">
            <div
              class="meter-left"
              :style="{'animation-name':`${expandFlag?'identifier':'closeidentifier'}`}"
            >
              <el-popover
                placement="top-start"
                width="200"
                trigger="click"
                style="padding: 0;"
                @show="showPopover"
                v-model="popoverFlag"
              >
                <div class="plate">
                  <ul>
                    <li class="firstLi">新建自选板块</li>
                    <li
                      v-for="(item, index) in  userFolderList"
                      :key="index"
                      @click="changeActive(item)"
                      :class="active.id == item.id ? 'active' : ''"
                    >{{ item.name }} ({{item.cou}})股</li>
                  </ul>
                </div>
                <span slot="reference">+加自选</span>
              </el-popover>
              <div class="xian">|</div>
              <div class="meter-right">
                <el-dropdown
                  :hide-on-click="false"
                  trigger="click"
                  placement="bottom-start"
                  @visible-change="visibleChange"
                >
                  <span class="el-dropdown-link">
                    设置表头
                    <img
                      style="margin-left: 3px; width: 9px; height: 7px"
                      src="@/assets/shezhibiaotou.png"
                      alt
                    />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <div
                        class="titles"
                        style="width: 400px; display: flex;justify-content: space-between;"
                      >
                        <div class="titles-left">
                          <span>股票</span>
                          <el-checkbox-group
                            v-model="checkstock"
                            style="border-right: 1px solid #f3f3f3;"
                          >
                            <el-checkbox
                              v-for="(item,idx) in stockHead"
                              :label="item.name"
                              :key="idx"
                            >{{ item.showname }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                        <div class="titles-center">
                          <span>波动</span>
                          <el-checkbox-group
                            v-model="checkListWaveHead"
                            style="border-right: 1px solid #f3f3f3;"
                          >
                            <el-checkbox
                              v-for="(item, index) in all_wave_head"
                              :label="item.name"
                              :key="index"
                            >{{ item.showname }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                        <div class="titles-center">
                          <span>结构</span>
                          <el-checkbox-group
                            v-model="aliasname"
                            style="border-right: 1px solid #f3f3f3;"
                          >
                            <el-checkbox
                              v-for="(item, index) in aliasname_list"
                              :label="item.aliasname"
                              :key="index"
                            >{{ item.aliasname }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                        <div class="titles-right">
                          <span>周期</span>
                          <el-checkbox-group v-model="checkList">
                            <el-checkbox
                              v-for="(item, index) in tabList"
                              :label="item.cycletxt"
                              :key="index"
                            >{{ item.cycletxt }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
        <div class="meter-r">
          <autocomplete :code="vanillaQueryData.code" @getlist="getlist" :flag="true"></autocomplete>
        </div>
      </div>
      <!-- 列表 -->
      <div class="tables">
        <el-table
          :data="stock_list"
          stripe
          border
          row-key="id"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="changeCellStyle"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :default-sort="{ prop: 'amount, market', order: 'descending' }"
          height="630"
          ref="table"
          @sort-change="changeSort"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          size="mini"
          v-loading="loading"
          :key="tablekey"
        >
          <el-table-column
            fixed="left"
            type="selection"
            width="40"
            align="center"
            :resizable="false"
          ></el-table-column>
          <el-table-column fixed="left" type="index" label="序号" width="55" align="center"></el-table-column>
          <el-table-column
            fixed="left"
            prop="stockcode"
            label="代码"
            align="center"
            :sortable="'custom'"
            :resizable="false"
          ></el-table-column>
          <el-table-column
            fixed="left"
            prop="name"
            label="简称"
            align="center"
            :sortable="'custom'"
            :resizable="false"
          >
            <template slot-scope="scope">
              <el-popover placement="right" width="600" trigger="hover">
                <el-table
                  :data="tableData"
                  :border="true"
                  :cell-style="changeCellStyle"
                  :highlight-current-row="true"
                  ref="table"
                  size="mini"
                  stripe
                  v-if="flag"
                >
                  <el-table-column
                    fixed="left"
                    prop="cycle"
                    label="周期/结构"
                    align="center"
                    :resizable="false"
                  ></el-table-column>
                  <el-table-column
                    v-for="(item, index) in aliasnameList"
                    :key="index"
                    :label="item.aliasname"
                    align="center"
                    :resizable="false"
                  >
                    <template slot-scope="scope">
                      <span>
                        {{
                        scope.row?.list[index]?.price
                        ? scope.row?.list[index]?.price
                        : "--"
                        }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
                <span
                  slot="reference"
                  style="cursor: pointer;"
                  @mouseenter="getTableList(scope.row)"
                  @click="goIndividualShare(scope.row)"
                >{{ scope.row.name }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="最新价"
            width="90"
            align="center"
            :sortable="'custom'"
            :resizable="false"
          ></el-table-column>
          <el-table-column
            prop="zhangfu"
            label="涨幅%"
            width="80"
            align="center"
            :show-overflow-tooltip="true"
            :resizable="false"
            :sortable="'custom'"
          >
            <template slot-scope="scope">
              <span
                :style="{ 
                color: `${scope.row.zhangfu > 0 ? '#e93030' : '#0E9D58' }`,
              }"
              >{{scope.row.zhangfu}}%</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="item in checkstockTable"
            :key="item.name"
            :prop="item.name"
            :label="item.showname"
            :width="getwidth(item.showname)"
            align="center"
            :show-overflow-tooltip="true"
            :resizable="false"
            :sortable="'custom'"
          ></el-table-column>
          <el-table-column
            v-for="item in checkListWaveHeadTable"
            :key="item.name"
            :prop="item.name"
            :label="item.showname"
            :width="getwidth(item.showname)"
            align="center"
            :show-overflow-tooltip="true"
            :resizable="false"
            :sortable="'custom'"
          >
            <template slot-scope="scope">
              <span
                :style="{color: getColor(scope.row[item.name])}"
              >{{ getPercentageSign(scope.row[item.name]) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in productList"
            :key="index"
            :label="item.name"
            :prop="item.name"
            width="105"
            align="center"
            :show-overflow-tooltip="true"
            :resizable="false"
            :sortable="'custom'"
          >
            <template slot-scope="scope">
              <span>
                {{
                scope.row.xcprice_list[index].price
                ? scope.row.xcprice_list[index].price
                : "-"
                }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="所有板块" :visible.sync="dialogVisible" width="520">
      <el-table
        :data="alltableData"
        style="width: 100%"
        @selection-change="selectionalltableData"
        ref="multipleTable"
        class="typeTable"
        height="400"
        :cell-style="changeCellStyle"
        @sort-change="changealltableSort"
        v-loading="allloading"
      >
        <el-table-column type="selection" label="选择项" width="55"></el-table-column>
        <el-table-column type="index" label="排序" width="50"></el-table-column>
        <el-table-column prop="name" label="板块名称" width="180"></el-table-column>
        <el-table-column prop="zhangfu" label="涨跌幅" width="180" :sortable="'custom'">
          <template slot-scope="scope">
            <span
              :style="{color:scope.row.zhangfu>0?'#E93030' : '#0E9D58'}"
            >{{ scope.row.zhangfu }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="nianchuzhijin" label="年初至今" :sortable="'custom'">
          <template slot-scope="scope">
            <span
              :style="{color:scope.row.nianchuzhijin>0?'#E93030' : '#0E9D58'}"
            >{{ scope.row.nianchuzhijin }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="zhangfu5ri" label="5日涨幅" :sortable="'custom'">
          <template slot-scope="scope">
            <span
              :style="{color:scope.row.zhangfu5ri>0?'#E93030' : '#0E9D58'}"
            >{{ scope.row.zhangfu5ri }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="zhangfu10ri" label="10日涨幅" :sortable="'custom'">
          <template slot-scope="scope">
            <span
              :style="{color:scope.row.zhangfu10ri>0?'#E93030' : '#0E9D58'}"
            >{{ scope.row.zhangfu10ri }}%</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="()=>{
          dialogVisible = false
          vanillaQueryData.gainian= tableRadio[0].name
          }"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新建自选 -->
    <el-dialog title="新建自选板块" :visible.sync="userFolderDialog" width="30%" class="userFolderDialog">
      <div class="title">板块名称:</div>
      <el-input size="mini" v-model="stockcode"></el-input>
      <div class="warning">
        <i class="el-icon-warning"></i>
        支持300个板块，可同步到手机
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveUserStock">确 定</el-button>
        <el-button @click="userFolderDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import autocomplete from "@/components/autocomplete.vue";
import {
  vanilla,
  saveTableHead,
  save_user_stock,
  zhishu,
  tonghuashun,
  plate
} from "@/api/MarketPlace/index";
import { detail_data } from "@/api/index";
import { folder, save_folder_join } from "@/api/OptionalStock/index";
export default {
  name: "Geometry1Vanilla",
  components: {
    autocomplete
  },
  watch: {
    vanillaQueryData: {
      handler() {
        this.queryData.page_no = 1;
        this.stock_list = [];
        this.stockList();
      },
      deep: true
    }
  },
  data() {
    return {
      input: "",
      value: [],
      conceptualOptions: [], // 概念板块options
      listedSectorOptions: [], // 上市板块options
      actualControllerOptions: [],
      listingLocationOptions: [
        { name: "北京", value: "2" },
        { name: "上海", value: "1" },
        { name: "深圳", value: "0" },
        { name: "香港", value: "31" }
      ],
      form: {},
      mold: [
        { id: 1, name: "香草" },
        { id: 2, name: "雪球" }
      ],
      // 接口表头
      productList: [],
      stock_list: [],
      // 动态表头——股票
      stockHead: [],
      checkstock: [],
      checkstockTable: [],
      // 动态表头——结构
      aliasname_list: [],
      aliasname: [],
      // 动态表头——周期
      tabList: [],
      checkList: [],
      //动态表头
      all_wave_head: [],
      checkListWaveHead: [],
      checkListWaveHeadTable: [],
      // 表格分页
      total: 0,
      vanillaQueryData: {
        page_size: 20, // 每页数量
        gainian: "",
        bankuai: "",
        vanillaQueryData: "",
        marketvalue1: "",
        marketvalue2: "",
        stockprice1: "",
        stockprice2: ""
      },
      queryData: {
        code: "",
        page_no: 1
      },
      //排序
      prop: {},
      //自选数据
      checkedVal: [],
      expandFlag: true,
      tableData: [],
      aliasnameList: [],
      dialogVisible: false,
      alltableData: [],
      alltotal: 0,
      allTableQuery: {
        page_size: 20,
        page_no: 1
      },
      tableRadio: [],
      zhishuData: [],
      colseTime: {},
      plateList: [],
      allProp: {},
      loading: false,
      allloading: false,
      userFolderList: [],
      active: {},
      userFolderDialog: false,
      stockcode: "",
      popoverFlag: false,
      totalPage: 0,
      alltotalPage: 0,
      fall: [],
      activeName: "",
      flag: true,
      tablekey: 1,
      warning: true
    };
  },
  computed: {
    bankuai(n) {
      if (this.vanillaQueryData.bankuai) {
        return this.getName(
          this.listedSectorOptions,
          this.vanillaQueryData.bankuai
        );
      }
    },
    exchange(n) {
      if (this.vanillaQueryData.exchange) {
        return this.getName(
          this.listingLocationOptions,
          this.vanillaQueryData.exchange
        );
      }
    }
  },
  mounted() {
    this.stockList();
    this.lazyLoading();
    this.getzhishu();
    this.colseTime = setInterval(() => {
      this.getzhishu();
    }, 600000);
    this.getplate();
    this.getfolder();
  },
  destroyed() {
    clearInterval(this.colseTime);
  },
  methods: {
    async getzhishu() {
      const { data } = await zhishu();
      var arr2 = [];
      for (var i = 0; i < data.list.length; i = i + 2) {
        arr2.push(data.list.slice(i, i + 2));
      }
      this.zhishuData = arr2;
    },
    getName(Options, val) {
      var aa = [];
      aa = Options?.filter(item => {
        console.log(item);
        return (item.value || item.id) == val;
      });
      console.log(aa);
      return aa[0]?.name;
    },
    // 列改变颜色/居中
    changeCellStyle(row) {
      if (
        row.column.label == "简称" ||
        row.column.label == "流通市值（元）" ||
        row.column.label == "板块" ||
        row.column.label == "概念"
      ) {
        return "color: #1657D9;font-size:13px;height:32px;padding:0px";
      } else {
        return "font-size:13px;height:32px;padding:0px";
      }
    },
    expand() {
      this.expandFlag = !this.expandFlag;
    },
    // 动态表头数据获取
    group(item) {
      console.log(item, "group", this.checkList);
    },
    // 获取列表后台数据
    async stockList() {
      this.loading = true;
      console.log(this.queryData);
      const { data } = await vanilla({
        ...this.prop,
        ...this.queryData,
        ...this.vanillaQueryData
      });
      this.stock_list.push(...data.stock_list);
      this.productList = data.product_list;
      this.aliasname_list = data.aliasname_list; //结构表头
      var aliasname = data.aliasname_list.filter(item => {
        return item.show == 1;
      });
      this.aliasname = aliasname.map(item => {
        return item.aliasname;
      });
      this.tabList = data.cycle_list; //周期表头
      var checkList = data.cycle_list.filter(item => {
        return item.show == 1;
      });
      this.checkList = checkList.map(item => {
        return item.cycletxt;
      });
      this.all_wave_head = data.all_wave_head;
      this.checkListWaveHeadTable = data.all_wave_head.filter(item => {
        return item.show == 1;
      });
      this.checkListWaveHead = this.checkListWaveHeadTable.map(item => {
        return item.name;
      });
      this.conceptualOptions = data.concept_list;
      this.listedSectorOptions = data.sector_list;
      this.actualControllerOptions = data.owner_list;
      this.stockHead = data.all_stock_head; //股票表头
      this.checkstockTable = data.all_stock_head.filter(item => {
        return item.show == 1; //选中的表头
      });
      this.checkstock = this.checkstockTable.map(item => {
        return item.name;
      });
      this.total = data.total;
      this.loading = false;
      this.totalPage = data.page_cou;
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    //重置
    reset() {
      this.vanillaQueryData = {
        code: "",
        page_no: 1, // 页码
        page_size: 20, // 每页数量
        gainian: "",
        bankuai: "",
        vanillaQueryData: "",
        marketvalue1: "",
        marketvalue2: "",
        stockprice1: "",
        stockprice2: ""
      };
    },
    //保存表头
    async visibleChange(val) {
      if (val == false) {
        const data = await saveTableHead({
          stock_field: this.checkstock.join(),
          aliasname: this.aliasname.join(),
          wave_field: this.checkListWaveHead.join(),
          cycle: this.checkList.join(),
          type: "1"
        });
        if (data.code == 1) {
          this.$message({
            type: "success",
            message: data.msg
          });
          this.queryData.page_no = 1;
          this.stock_list = [];
          this.stockList();
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        }
      }
    },
    //排序
    changeSort(prop) {
      var aa = this.productList.filter(item => {
        return item.name == prop.prop;
      });
      if (aa.length > 0) {
        this.prop = {
          qiquan: prop.prop,
          order: prop.order
        };
      } else {
        this.prop = {
          sort: prop.prop || "",
          order: prop.order || ""
        };
      }
      this.queryData.page_no = 1;
      this.stock_list = [];
      this.stockList();
    },
    getColor(name) {
      var aa = name + "";
      if (aa.indexOf(".") !== -1) {
        return name > 0 ? "#E93030" : "#0E9D58";
      } else {
        return;
      }
    },
    changealltableSort(prop) {
      this.allProp = {
        sort: prop.prop,
        order: prop.order
      };
      this.gettonghuashun();
    },
    getPercentageSign(name) {
      var aa = name + "";
      console.log();
      if (aa.indexOf(".") !== -1) {
        return name + "%";
      } else {
        return name;
      }
    },
    handleSelectionChange(val) {
      this.checkedVal = val.map(item => {
        return item.stockcode;
      });
    },
    async getTableList(item) {
      if (this.flag) {
        this.flag = false;
        const res = await detail_data({ code: item.stockcode });
        if (res.code === 1) {
          this.aliasnameList = res.data.aliasname_list;
          res.data.price_list.map((item, index) => {
            item.id = index;
            return item;
          });
          this.tableData = res.data.price_list;
        }
        this.flag = true;
      }
    },
    goIndividualShare(item) {
      this.$router.push({
        path: "/IndividualShare",
        query: {
          code: item.stockcode
        }
      });
    },
    selectionalltableData(selection) {
      this.tableRadio = selection;
      if (selection.length > 1) {
        this.$refs.typeTable.clearSelection();
        this.$refs.typeTable.toggleRowSelection(selection.pop());
      }
      console.log();
    },
    async getplate() {
      const { data } = await plate();
      this.plateList = data.rise;
      this.fall = data.fall;
    },
    morePlate() {
      this.dialogVisible = true;
      this.gettonghuashun();
      // let dom = document.querySelector(
      //   ".el-dialog__wrapper .el-table__body-wrapper"
      // );
      this.$nextTick(() => {
        let dom = document.querySelector(".typeTable .el-table__body-wrapper");
        console.log(dom);
        dom.addEventListener("scroll", v => {
          const scrollDistance =
            dom.scrollHeight - dom.scrollTop - dom.clientHeight;
          if (scrollDistance <= 1) {
            //等于0证明已经到底，可以请求接口
            if (this.allTableQuery.page_no >= this.alltotalPage) {
              this.$message.warning("我~是有底线的 (～￣▽￣)～");
            }
            if (this.allTableQuery.page_no < this.alltotalPage) {
              this.allTableQuery.page_no++;
              this.gettonghuashun();
            }
          }
        });
      });
    },
    async gettonghuashun() {
      this.allloading = true;
      const { data } = await tonghuashun({
        ...this.allTableQuery,
        ...this.allProp
      });
      this.alltableData.push(...data.list);
      this.alltotalPage = data.page_cou;
      this.allloading = false;
    },
    getlist(e) {
      this.vanillaQueryData.code = e;
      this.queryData.page_no = 1;
      this.stock_list = [];
      this.stockList();
    },
    async getfolder() {
      const { data } = await folder();
      this.userFolderList = data.user_folder_list;
    },
    async changeActive(item) {
      this.active = item;
      if (this.checkedVal.length == 0) {
        this.$message({
          type: "warning",
          message: "请勾选下方表格至少一条数据"
        });
      } else {
        const data = await save_user_stock({
          folder_id: item.id,
          stockcode: this.checkedVal.join()
        });
        if ((data.msg = "设置成功")) {
          this.$message({
            type: "success",
            message: "设置成功"
          });
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      }
    },
    async saveUserStock() {
      if (this.checkedVal.length == 0) {
        this.$message({
          type: "warning",
          message: "请勾选下方表格至少一条数据"
        });
      } else {
        const data = await save_folder_join({
          name: this.stockcode,
          stockcode: this.checkedVal.join()
        });
        if (data.msg == "保存成功") {
          this.$message({ type: "success", message: data.msg });
        } else {
          this.$message({ type: "error", message: data.msg });
        }
        this.userFolderDialog = false;
        this.stockcode = "";
      }
    },
    showPopover() {
      if (this.checkedVal.length == 0) {
        this.popoverFlag = false;
      } else {
        this.popoverFlag = true;
      }
    },
    lazyLoading() {
      let dom = document.querySelector(".el-table__body-wrapper");
      dom.addEventListener("scroll", v => {
        const scrollDistance =
          dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        if (scrollDistance <= 1) {
          if (this.queryData.page_no >= this.totalPage && this.warning) {
            this.warning = false;
            this.$message.warning("我~是有底线的 (～￣▽￣)～");
            setTimeout(() => {
              this.warning = true;
            }, 1000);
          }
          if (this.queryData.page_no < this.totalPage && !this.loading) {
            this.queryData.page_no++;
            this.stockList();
          }
        }
      });
    },
    getwidth(name) {
      return `${15 * name.length + 40} `;
    }
  }
};
</script>
<style>
@keyframes identifier {
  from {
    transform: translateX(-200px);
  }
  to {
    transform: translateX(0px);
  }
}
@keyframes closeidentifier {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-200px);
  }
}
</style>
<style lang="less" scoped>
.tabList {
  margin: 16px 0 16px 0;
  background-color: #fff;
  width: 100%;
  height: auto;
  border-radius: 10px;
  .el-tabs--border-card {
    border-radius: 10px;
    border: none;
  }
  .tabs {
    // 香草头部信息
    .newhead {
      width: 100%;
      background: #fff;
      border-radius: 0 0 10px 10px;

      // 香草指数信息
      .exponent {
        display: flex;
        flex-wrap: wrap;
        height: 63px;
        margin-top: 14px;
        align-items: center;
        &_first {
          width: 350px;
          display: flex;
          position: relative;
          &::after {
            content: "";
            height: 29px;
            width: 1px;
            background: #cdcdcd;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          .list {
            margin-right: 20px;
            min-width: 94px;
            height: 49px;
            text-align: center;
            p {
              font-size: 20px;
              color: #111111;
              margin: 0;
            }
            span {
              font-size: 12px;
              color: #e93030;
            }
          }
        }
        &_list {
          min-width: 200px;
          position: relative;
          &:last-child {
            height: 60%;
            .list::after {
              height: unset;
            }
          }
          .list {
            margin: 0 20px;
            &::after {
              content: "";
              height: 29px;
              width: 1px;
              background: #cdcdcd;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            .lable {
              font-size: 15px;
              color: #111111;
            }
            .value {
              color: #e93030;
              font-weight: 400;
              font-size: 14px;
              margin-left: 10px;
            }
          }
        }
      }
    }
    .hotPlate {
      width: 100%;
      &-head {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      &-main {
        margin-top: 12px;
        height: 50px;
        display: flex;
        .list {
          height: 100%;
          width: 152px;
          background: #ea5454;
          border-radius: 4px;
          text-align: center;
          color: #fff;
          cursor: pointer;
          margin-right: 30px;
          &:hover {
            background: #e60000 !important;
          }
          .list {
            width: 100%;
            height: 50%;
            line-height: 30px;
          }
          .name {
            width: 100%;
            height: 50%;
            line-height: 30px;
          }
          .index {
            width: 100%;
            height: 50%;
            line-height: 28px;
          }
        }
        .fall:hover {
          background: #07b44c !important;
        }
      }
    }
    // 表头信息
    .meter {
      width: 100%;
      padding: 0px 0 16px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      box-sizing: border-box;
      .expand {
        display: flex;
        align-items: center;
        cursor: pointer;
        .el-icon-s-unfold,
        .el-icon-s-fold {
          font-size: 19px;
          margin-right: 20px;
          position: relative;
          &::after {
            content: "";
            width: 2px;
            height: 14px;
            background: #d8d8d8;
            position: absolute;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .animationName {
          width: 210px;
          overflow: hidden;
          .meter-left {
            font-size: 14px;
            color: #1657d9;
            display: flex;
            cursor: pointer;
            animation-name: identifier;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            overflow: hidden;
            padding-left: 10px;
            span {
              padding-right: 13px;
            }
            .xian {
              width: 1px;
              height: 18px;
              color: #d8d8d8;
            }
            .meter-right {
              margin-left: 16px;
            }
          }
        }

        .filterCriteria {
        }
      }

      .meter-r {
        width: 210px;
        height: 35px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        margin-right: 30px;
        .up-input {
          padding: 0 !important;
        }
        .up-but {
          border: none;
          background: #f7f7f7;
          height: 40px;
          border-radius: 0px;
          img {
            width: 12px;
            height: 12px;
          }
        }
      }
    }
    .searchedit {
      .search {
        color: #111111;
        font-size: 15px;
        margin-right: 20px;
        position: relative;
        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background: #111111;
          position: absolute;
          right: -10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .all {
        color: #165dff;
        font-size: 15px;
        margin-right: 15px;
      }
    }
    .snowball {
      position: relative;
      .btns {
        position: absolute;
        right: 103px;
        bottom: 222px;
        width: 28px;
        height: 66px;
        line-height: 14px;
        font-size: 14px;
        text-align: center;
        background-color: #3377ff;
        border: none;
        border-radius: 2px;
        color: #fff;
      }
    }
  }
}
.newTabled {
  // margin-top: 20px;
  background: #fff;
  padding: 10px 0px 0px 0;
  width: 100%;
  border-radius: 10px;
  .tables {
    width: 99%;
  }
  .matter {
    .matter-top {
      position: relative;
      .el-textarea {
        background-color: #f7f7f7;
      }
      .textbtn {
        position: absolute;
        right: 5px;
        bottom: 5px;
        background-color: #3377ff;
        color: #fff;
        font-size: 12px;
      }
    }
    .form {
      margin-top: 16px;
      .el-form-item {
        margin-bottom: 5px;
      }
    }
  }
}
.header {
  width: 100%;
  border-radius: 10px;
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
  .header-left {
    // width: 90%;
    display: flex;
    align-items: center;
    .conceptd {
      margin-right: 20px;
      span {
        margin-left: 5px;
      }
    }
    .concept {
      padding: 10px;
      margin-right: 10px;
      span {
        color: #1e2024;
        font-size: 14px;
        margin-right: 5px;
      }
    }
    .title {
      margin-right: 10px;
    }
    .inp {
      width: 40px;
      height: 24px;
      background: #fafafc;
      /deep/ .el-input__inner {
        width: 40px;
        height: 24px;
      }
    }
    .defSelect {
      width: 100px;
    }
  }
  .header-right {
    // width: 10%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    button {
      min-width: 72px;
      height: 32px;
      margin: 7px 5px;
      padding: 9px 10px;
    }
    .search {
      background-color: #165dff;
      font-size: 14px;
      color: #fff;
    }
    .refresh {
      background-color: #e8e8e8;
      font-size: 14px;
      color: #1d2129;
    }
  }
}
/deep/ .el-table--border th.el-table__cell:hover {
  background: #ddd;
}

/deep/.el-table th.el-table__cell > .cell {
  padding: unset !important;
}
/deep/ .el-table th.el-table__cell {
  background: #f4f4f4;
  font-weight: unset;
  color: #1e2024;
  height: 50px;
  cursor: pointer;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: unset;
  color: #111111;
}

.titles {
  &-center {
    padding-left: 20px;
  }
  &-right {
    padding-left: 20px;
  }
  /deep/ .el-checkbox {
    width: 100%;
    margin-right: 0;
  }
}
.typeTable {
  ::v-deep .el-table__header-wrapper {
    .el-table-column--selection {
      .el-checkbox {
        display: none !important;
      }
    }
  }
}
.plate {
  width: 202px;
  ul {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    background: #f0f0f0;
    .firstLi {
      width: 100%;
      height: 32px;
      border-bottom: 1px solid #ccc;
      line-height: 32px;
    }
    li {
      list-style: none;
      background: #fff;
      height: 21px;
      cursor: pointer;
      padding-left: 10px;
      &:hover {
        background: #1570e8;
        color: #fff;
      }
    }

    .active {
      background: #1570e8;
      color: #fff;
    }
  }
}
.userFolderDialog {
  /deep/.el-dialog__header {
    background: #3e4346;
    text-align: left;
    height: 32px;
    box-sizing: border-box;
    padding: 0px 20px 0px 20px;
    display: flex;
    align-items: center;

    .el-dialog__headerbtn {
      top: 5px;
    }

    .el-dialog__title {
      color: #fff;
    }
  }

  /deep/ .el-dialog__body {
    padding-bottom: 0;

    .title {
      color: #000000;
      font-size: 15px;
      text-align: left;
      height: 30px;
    }

    .warning {
      height: 40px;
      line-height: 40px;
      text-align: left;
      color: #000000;

      .el-icon-warning {
        color: #0081db;
        font-size: 16px;
      }
    }
  }
}
</style>